<template>
  <div class="content">
    <heading grade='1'>教练信息</heading>
    <el-form ref="form" v-bind="getFormProps()">
      <el-form-item label="姓名："prop="name" :rules="[
              { required: true, message: '请输入教练姓名'},
              { min: 2, message: '请输入全名'},
              Object.assign({trigger: 'blur'}, validator.rule.userName)
            ]">
        <el-row>
          <el-col :span="16">
            <el-input :maxlength="40" v-model.trim="form.name" placeholder="请输入教练姓名" v-focus></el-input>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="性别："prop="sex" :rules="[
              { required: true, message: '请选择性别'},
            ]">
        <el-radio-group v-model="form.sex">
          <el-radio :label="1">男</el-radio>
          <el-radio :label="2">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="国籍："prop="nationality" :rules="[
              { required: true, message: '请选择国籍'},
            ]">
        <el-row>
          <el-col :span="16">
          <el-select v-model="form.nationality" placeholder="请选择国籍" style="width: 100%;" filterable>
            <el-option v-for="item in country_list" :key="item.id" :value="item.countryCode" :label="item.countryChineseName">
            </el-option>
          </el-select>
        </el-col>
      </el-row> 
      </el-form-item>
      <el-form-item label="证件号码："prop="idNo" :rules="[
              { required: true, message: '请输入有效证件号码'},
              Object.assign({trigger: 'blur', validator: validator.rule.isIp.validator.bind(this)})
            ]">
        <el-row>
          <el-col :span="4">
            <el-select v-model="form.idType" style="width: 90%">
              <el-option
                v-for="item in ipList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="12">
            <el-input v-model="form.idNo" placeholder="请输入有效证件号码" @blur="handleIp(form.idNo)"></el-input>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="出生日期："prop="birthday" :rules="[
              { required: false, message: '请选择出生日期'},
            ]">
        <el-row>
          <el-col :span="16">
            <el-date-picker
              :editable="true"
              v-model="form.birthday"
              type="date"
              placeholder="选择日期"
              :picker-options="pickerOptions"
              style="width: 100%">
            </el-date-picker>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="联系手机："prop="mobile" :rules="[
          { required: true, message: '请输入手机号'},
          Object.assign({trigger: 'blur'}, validator.rule.mobile)
        ]">
        <el-row>
          <el-col :span="16">
            <el-input v-model="form.mobile" placeholder="请输入手机号"></el-input>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="教练照片： "prop="photo" :rules="[ 
              { required: true, message: '请上传教练照片！'}, 
            ]">
        <img-upload :size="1024*1024*3" v-model="form.photo" class="logo-upload"></img-upload>
        <span class="form-help">图片大小不能超过3MB</span>
      </el-form-item>
      <el-form-item label="证书："prop="certificateImages" :rules="[
              { required: false, message: '请上传证书'},
            ]">
        <img-group-upload :size="1024*1024*3" v-model="form.certificateImages" :limit="4" />
      </el-form-item>
      <el-form-item label="证书名称："prop="certificateName">
        <el-col :span="24">
          <el-input :maxlength="200" v-model.trim="form.certificateName" placeholder="请输入证书名称，以顿号隔开"></el-input>
        </el-col> 
      </el-form-item>
      <el-form-item label="教练简介："prop="intro">
        <el-col :span="24">
          <x-input v-model="form.intro" :maxlength="1000" type="textarea" :rows="4"/>
        </el-col>
      </el-form-item>
      <el-form-item label="备注："prop="remark">
        <el-col :span="24">
          <el-input :maxlength="200" v-model.trim="form.remark"></el-input>
        </el-col> 
      </el-form-item>
      <div class="button-box">
        <router-link to="/training/coach">
          <el-button>取消</el-button>
        </router-link>
        <el-button type="primary" native-type="submit" :loading="loading">保存</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import { form } from 'utils/mixins'
import validator from 'utils/validator'
import ImgUpload from 'modules/components/ImgUpload'
import ImgGroupUpload from 'modules/components/ImgGroupUpload'
import { mapGetters } from 'vuex'
import api from 'api/train'
export default {
  mixins: [form],
  components: {
    ImgUpload,
    ImgGroupUpload
  },
  computed: {
    ...mapGetters({
      train_coach_info: 'train_coach_info', // 教练信息
      country_list: 'country_list'
    })
  },
  data () {
    return {
      validator,
      loading: false,
      form: {
        name: '', // 教练姓名
        sex: 1,
        nationality: '',
        idType: 1,
        idNo: '', // 证件号码
        birthday: '',
        mobile: '',
        photo: '',
        certificateImages: [], // 证书
        certificateName: '', // 证书名称
        intro: '', // 教练简介
        remark: '' // 备注
      },
      ipList: [
        {
          value: 1,
          label: '身份证'
        },
        {
          value: 2,
          label: '护照'
        },
        {
          value: 3,
          label: '其他证件'
        }
      ],
      pickerOptions: {
        disabledDate (time) { // 只能选择过去时间
          return time.getTime() > Date.now()
        }
      }
    }
  },
  created () {
    if (this.$route.path === '/training/coach/edit') {
      this.$store.dispatch('train_coach_info', {teacherId: this.$route.query.id})
    }
    this.$store.dispatch('country_list')
  },
  watch: {
    train_coach_info (value) {
      this.form.name = value.name
      this.form.sex = value.sex
      this.form.nationality = value.nationality
      this.form.idType = value.idType
      this.form.idNo = value.idNo
      this.form.birthday = new Date(value.birthday).getTime()
      this.form.mobile = value.mobile
      this.form.certificateName = value.certificateName
      this.form.intro = value.intro
      this.form.remark = value.remark
      this.form.photo = value.photo
      this.form.certificateImages = value.certificateImages
    }
  },
  methods: {
    handleIp (value) {  // 根据身份证自动输入生日日期
      if (this.form.idType) {
        this.form.birthday = new Date(`${value.substring(6, 10)}-${value.substring(10, 12)}-${value.substring(12, 14)}`).getTime() // es6语法
      }
    },
    submit () {
      let data = Object.assign({id: this.$route.query.id}, this.form)
      delete data.birthday
      if (this.$route.path === '/training/coach/edit') {
        let newData = Object.assign({birthday: this.form.birthday ? new Date(this.form.birthday).getTime() : ''}, data)
        api.editCoach(newData, {context: this, successMsg: '修改成功'}).then(res => {
          history.back()
        })
      } else {
        delete data.id
        let newData = Object.assign({birthday: this.form.birthday ? new Date(this.form.birthday).getTime() : ''}, data)
        api.editCoach(newData, {context: this, successMsg: '新增成功'}).then(res => {
          history.back()
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  .el-radio-group .el-radio {
    min-width: 40px;
  }
  .logo-upload {
    width: 148px;
    height: 148px;
  }
}
</style>
